<template>
    <div>
        <!-- <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item replace>曲库管理</el-breadcrumb-item>
                <el-breadcrumb-item replace>{{ query.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="container">
            <div class="handle-box">
                <el-button :type="buttontype[0]" style="margin-left: 25.2px; margin-bottom: 18px" @click.native="handleToggle(0)"
                    >歌曲</el-button
                >
                <el-button :type="buttontype[1]" style="margin-left: 25.2px; margin-bottom: 18px" @click.native="handleToggle(1)"
                    >歌手</el-button
                >
                <el-button :type="buttontype[2]" style="margin-left: 25.2px; margin-bottom: 18px" @click.native="handleToggle(2)"
                    >专辑</el-button
                >

                <el-form ref="form" :inline="true" :model="form">
                    <el-form-item label="" v-if="query.n == 0 || query.n == 1 || query.n == 2">
                        <el-input
                            placeholder="ID"
                            clearable
                            @clear="handleSearch"
                            @keyup.native.enter="handleSearch"
                            v-model="query.id"
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="" v-if="query.n == 0">
                        <el-input
                            @keyup.native.enter="handleSearch"
                            v-model="query.importName"
                            placeholder="歌曲名"
                            class="handle-input mr10"
                            clearable
                            @clear="handleSearch"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="" v-if="query.n == 0 || query.n == 1">
                        <el-input
                            clearable
                            @clear="handleSearch"
                            @keyup.native.enter="handleSearch"
                            v-model="query.actorImportName"
                            placeholder="歌手名"
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="" v-if="query.n == 0 || query.n == 2">
                        <el-input
                            @keyup.native.enter="handleSearch"
                            v-model="query.importName"
                            placeholder="专辑名"
                            class="handle-input mr10"
                            clearable
                            @clear="handleSearch"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="" v-if="query.n == 0">
                        <el-input
                            @keyup.native.enter="handleSearch"
                            v-model="query.importName"
                            placeholder="CP名"
                            class="handle-input mr10"
                            clearable
                            @clear="handleSearch"
                        ></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button :disabled="disabled" type="primary" @click="handleSearch">
                            <!-- 查询 -->
                            {{ $t('m.queryBtn') }}
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column type="selection" width="55" align="center"></el-table-column>

                <el-table-column width="auto" label="ID" align="center" v-if="query.n == 0">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>

                <el-table-column width="auto" label="歌手ID" align="center" v-if="query.n == 1">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>

                <el-table-column width="auto" label="专辑ID" align="center" v-if="query.n == 2">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>

                <el-table-column width="auto" label="歌曲名" align="center" :show-overflow-tooltip="true" v-if="query.n == 0">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>

                <el-table-column
                    width="auto"
                    label="歌手名"
                    align="center"
                    :show-overflow-tooltip="true"
                    v-if="query.n == 0 || query.n == 1 || query.n == 2"
                >
                    <template slot-scope="scope">{{ scope.row.actorImportName }}</template>
                </el-table-column>

                <el-table-column
                    width="auto"
                    label="专辑名"
                    align="center"
                    :show-overflow-tooltip="true"
                    v-if="query.n == 0 || query.n == 2"
                >
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>

                <el-table-column width="auto" label="CP名" align="center" :show-overflow-tooltip="true" v-if="query.n == 0">
                    <template slot-scope="scope">{{ scope.row.actorImportName }}</template>
                </el-table-column>

                <el-table-column
                    width="auto"
                    label="敏感信息"
                    align="center"
                    :show-overflow-tooltip="true"
                    v-if="query.n == 0 || query.n == 1 || query.n == 2"
                >
                    <template slot-scope="scope">{{ scope.row.actorImportName }}</template>
                </el-table-column>

                <el-table-column width="auto" label="状态" align="center" v-if="query.n == 0 || query.n == 1 || query.n == 2">
                    <template slot-scope="scope">
                        <img
                            v-if="scope.row.status == 1"
                            style="width: 20px; height: 20px"
                            src="@/assets/images/歌曲管理/u464.png"
                            alt=""
                        />
                        <img
                            v-else-if="scope.row.status == 2"
                            style="width: 20px; height: 20px"
                            src="@/assets/images/歌曲管理/u468.png"
                            alt=""
                        />
                        <img
                            v-else-if="scope.row.status == 3"
                            style="width: 20px; height: 20px"
                            src="@/assets/images/歌曲管理/u468.png"
                            alt=""
                        />
                        <img v-else style="width: 20px; height: 20px" src="@/assets/images/歌曲管理/u468.png" alt="" />
                    </template>
                </el-table-column>

                <el-table-column
                    width="auto"
                    label="操作者"
                    align="center"
                    v-if="query.n == 0 || query.n == 1 || query.n == 2"
                    :show-overflow-tooltip="true"
                >
                    <template>{{ operator }}</template>
                </el-table-column>

                <el-table-column
                    width="auto"
                    label="更新时间"
                    align="center"
                    v-if="query.n == 0 || query.n == 1 || query.n == 2"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">{{ scope.row.updateTime }}</template>
                </el-table-column>

                <el-table-column width="auto" label="管理" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">
                            <!-- 编辑 -->
                            {{ $t('m.editBtn') }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination
                    background
                    layout="total,sizes, prev, pager, next, jumper"
                    :page-sizes="[5, 10, 20, 30]"
                    @size-change="handleSizeChange"
                    :current-page="query.pageIndex + 1"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
  import NProgress from 'nprogress';
  import { debounce, throttle } from '@/utils/utils.js';
  export default {
      name: 'SongManage',
      data() {
          return {
              disabled: false,
              buttontype: ['primary', 'default', 'default'],
              query: {
                  title: '歌曲敏感信息',
                  n: 0, // 0表示歌曲 1 表示歌手 2 表示专辑

                  pageIndex: 0,
                  pageSize: 10,
                  id: '',
                  importName: '',
                  namePinyinFull: '',
                  actorImportName: '',
                  upc: '',
                  status: ''
              },
              operator: localStorage.getItem('ms_username') || '',
              tableData: [],
              pageTotal: 0,
              form: {}
          };
      },
      activated() {
          this.getData();
      },

      methods: {
          // setValueNull() {
          //     this.getData();
          // },
          handleToggle(n) {
              this.$set(this.query, 'n', n);
              for (var i = 0, len = this.buttontype.length; i < len; i++) {
                  this.buttontype[i] = 'default';
              }
              this.buttontype[n] = 'primary';

              if (n == 0) {
                  this.$set(this.query, 'title', '歌曲敏感信息');
              } else if (n == 1) {
                  this.$set(this.query, 'title', '歌手敏感信息');
              } else if (n == 2) {
                  this.$set(this.query, 'title', '专辑敏感信息');
              }
          },
          async getData() {
              try {
                  NProgress.start();
                  this.disabled = true;
                  let url = '/album/list';
                  let { data: res } = await this.$http[0].get(url, {
                      params: this.$removeField({
                          page: this.query.pageIndex,
                          size: this.query.pageSize,
                          ids: this.query.id.trim(),
                          importName: this.query.importName.trim(),
                          namePinyinFull: this.query.namePinyinFull.trim(),
                          actorImportName: this.query.actorImportName.trim(),
                          upc: this.query.upc.trim(),
                          status: this.query.status
                      })
                  });
                  console.log('专辑管理', res);
                  // 中间处理
                  if (res.data.list && res.data.list.length > 0) {
                      res.data.list.map((item) => {
                          item.actorImportName = '';
                          if (item.tblActors && item.tblActors.length != 0) {
                              item.tblActors.map((val) => {
                                  item.actorImportName += val.name + '/';
                              });
                              item.actorImportName = item.actorImportName.slice(0, -1);
                          }
                          item.createTime = this.$dateFormat(item.createTime, '', '-');
                          item.updateTime = this.$dateFormat(item.updateTime, '', '-');
                      });

                      this.tableData = res.data.list;
                      this.pageTotal = res.data.totalCount;
                  } else {
                      this.tableData = [];
                      this.pageTotal = 0;
                  }

                  NProgress.done();
                  this.disabled = false;
              } catch (err) {
                  console.dir(err);
                  NProgress.done();
                  this.disabled = false;
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },

          // 触发查询按钮
          // handleSearch() {
          //     this.$set(this.query, 'pageIndex', 0);
          //     this.getData();
          // },

          handleSearch: debounce(function () {
              this.$set(this.query, 'pageIndex', 0);
              this.getData();
          }, 300),

          // 编辑操作
          handleEdit(index, row) {
              if (this.query.n == 0) {
                  this.$router.replace({
                      // path: '/album_3/info_2',
                      path: '/song/info',
                      query: {
                          id: row.id
                      }
                  });
              } else if (this.query.n == 1) {
                  this.$router.replace({
                      // path: '/album_3/info_2',
                      path: '/singer_/edit',
                      query: {
                          // id: row.id
                          id: row.id
                      }
                  });
              } else if (this.query.n == 2) {
                  this.$router.replace({
                      // path: '/album_3/info_2',
                      path: '/album_3/info_2',
                      query: {
                          id: row.id
                      }
                  });
              }
          },
          // 保存编辑
          saveEdit() {
              this.editVisible = false;
              this.$message.success(`修改第 ${this.idx + 1} 行成功`);
              this.$set(this.tableData, this.idx, this.form);
          },
          // 分页导航
          handlePageChange(val) {
              this.$set(this.query, 'pageIndex', val - 1);
              this.getData();
          },
          handleSizeChange(val) {
              this.$set(this.query, 'pageSize', val);
              this.getData();
          }
      }
  };
</script>

<style scoped lang="scss">
  .handle-box {
      margin-bottom: 20px;
      .el-form {
          display: grid;
          grid-auto-flow: column;
          justify-content: flex-start;
          .el-form-item {
              width: 100%;
              .el-form-item__content {
                  .el-select,
                  .handle-input {
                      width: 100%;
                  }
              }
          }
      }
  }

  .handle-select {
      width: 120px;
  }

  .handle-input {
      /* width: 300px; */
      width: 69px;
      height: 28px;
      display: inline-block;
  }
  .table {
      width: 100%;
      font-size: 14px;
  }
  .red {
      color: #ff0000;
  }
  .mr10 {
      margin-right: 10px;
  }
  .table-td-thumb {
      display: block;
      margin: auto;
      width: 40px;
      height: 40px;
  }
</style>
